<template>
    <div class='recommend'>
        <div class='title'>热销推荐</div>
            <router-link tag='div' class='item' v-for='item of list' :key='item.id' to='/detail'>
                <div class='item-img'>
                        <img class='img-count' :src='item.imgUrl'>
                </div>
                <div class='item-text'>
                        <p class='txt-title'>{{item.title}}</p>
                        <p class='txt-desc'>{{item.desc}}</p>
                        <button class='txt-btn'>查看详情</button>
                </div>
            </router-link>
    </div>
</template>

<script>
export default{
  name: 'HomeRecommend',
  props:{
      list:Array
  }
  
}
</script>
<style lang="stylus" scoped>
.title
    margin-top: .2rem
    line-height: .8rem
    background: #eee
    text-indent: .2rem
.item
    height :1.9rem
    display :flex
    overflow :hidden
    .item-img
        width: 1.7rem
        height: 1.7rem
        padding: .1rem
        .img-count
            width :100%
    .item-text
        flex :1
        padding: .1rem
        .txt-title
            line-height: .54rem
            font-size: .32rem
        .txt-desc
            line-height: .4rem
            color: #ccc
        .txt-btn
            line-height: .44rem
            margin-top: .16rem
            background: #ff9300
            padding: 0 .2rem
            border-radius: .06rem
            color: #fff

        

</style>